<!-- 首页 -->
<template>
	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
	    <view class="topic-header">
	    	<view class="topic-title">关注话题</view>
	    	<view class="topic-more">更多</view>
	    </view>
	    <topic-scroll @openTopic="openTopic" :dataList="fans_topicList"></topic-scroll>
	    <talk-list @menu="menu" @more="more" @thumb="thumb" @chat="chat" :dataList="topList"></talk-list>
	    <view class="heart-header">
	    	<view class="topic-title">可能感兴趣的话题</view>
	    </view>
	    <n-swiper ref="topic" @guanzhu="guanzhu" height="450" bg-color="#fff" :autoplay="false" :list="topicList"></n-swiper>
	    <talk-list @menu="menu" @thumb="thumb" @chat="chat" :dataList="dataList"></talk-list>
	</mescroll-uni>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
import NSwiper from "@/components/n-swiper/n-swiper.vue"; // 圈子
export default {
	mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
	components: {
		NSwiper
	},
	props:{
		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
		index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			type: Number,
			default(){
				return 0
			}
		},
		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
			type: Array,
			default(){
				return []
			}
		},
		height: [Number,String] ,// mescroll的高度
	    keyword: {
	        type: String,
	        default(){
	        	return ''
	        }
	    }
	},
	data() {
		return {
			downOption:{
				auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption:{
				auto:false, // 不自动加载
				// page: {
				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				// 	size: 10 // 每页数据的数量
				// },
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty:{
			        icon: '/static/mescroll-empty.png',
					tip: '~ 暂无数据 ~', // 提示
					// btnText: '去看看'
				},
			    textNoMore:'没有更多了'
			},
			topList: [],
			topicList: [],
			dataList: [],
		};
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) { 
			if(page.num == 1){
				this.getTopicList();
			}
			this.$u.get('/wq/dynamic/list',{
				pageNum: page.num,
				pageSize: page.size,
			}).then(res => {
				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				this.mescroll.endSuccess(res.rows.length);
				//设置列表数据
				if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
				this.dataList=this.dataList.concat(res.rows); //追加新数据
			}).catch(err => {
		        //联网失败, 结束加载
		        this.mescroll.endErr();
		    })
		},
		//点击空布局按钮的回调
		emptyClick(){
			uni.showToast({
				title:'点击了按钮,具体逻辑自行实现'
			})
		},
		chat(e) {
			this.$u.route({
				url: 'packgeMine/pages/index/dynamic',
				params: {
					dynamicId: e.id,
				}
			});
		},
		thumb(e,i) {
			this.$u.post('/wq/dynamicGive/add',{
				dynamicId: e.id,
			}).then(res => {
				if(res.data){
					this.dataList[i].giveNum = this.dataList[i].giveNum + 1;
				}else{
					this.dataList[i].giveNum = this.dataList[i].giveNum - 1;
				}
			});
		},
		menu(e) {
			this.$emit('menu', e);
		},
		clickSheet(sheet) {
			if('remove' == sheet.tag){
				this.deleteTopic(sheet.id);
			}
		},
		deleteTopic(id) {
			this.$u.get('/wq/dynamic/delete',{
				id: id,
			}).then(res => {
				this.downCallback();
			})
		},
		getTopicList() {
			this.$u.get('/wq/topic/getList').then(res => {
				this.topicList = res.data;
			})
		},
		guanzhu(index, index2, topicId) {
			this.$u.get('/wq/topic/fans',{
				id: topicId,
			}).then(res => {
				this.$refs.topic.showFans(index,index2,res.data);
			})
		},
		openTopic(topic) {
			this.$u.route({
				url: 'pages/topic/index',
				params: {
					topicId: topic.topicId,
				}
			});
		},
	}
};
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.topic-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.heart-header {
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 0;
	}
	.topic-title {
		font-size: 26rpx;
		font-weight: bolder;
	}
	.topic-more {
		font-size: 24rpx;
		color: #505152bd;
	}
	.loadmore-box {
		padding: 30rpx 0;
	}
</style>
